<script setup lang="ts">
import { ElButton } from 'element-plus'
import { useEditorStore } from '@/stores/editor'
import ComponentLibrary from '@/components/designer/ComponentLibrary.vue'
import Renderer from '@/components/renderer/Renderer.vue'
import PropsPanel from '@/components/designer/PropsPanel.vue'

const store = useEditorStore()

const openPreview = () => {
  localStorage.setItem('tmagic-preview-page', JSON.stringify(store.page))
  window.open('#/preview', '_blank')
}
</script>

<template>
  <div class="app">
    <div class="header">
      <h2>✨ TMagic Vue 3</h2>
      <div>
        <ElButton @click="openPreview">👁️ 预览</ElButton>
        <ElButton type="primary" @click="store.saveToBackend">💾 保存</ElButton>
      </div>
    </div>
    <div class="editor">
      <ComponentLibrary />
      <div class="canvas">
        <Renderer :node="store.page" @select="store.selectNode" />
      </div>
      <PropsPanel />
    </div>
  </div>
</template>

<style scoped>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }
.app { padding: 16px; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.editor { display: flex; gap: 16px; height: calc(100vh - 80px); }
.canvas { flex: 1; border: 1px solid #ddd; padding: 16px; background: #fafafa; overflow: auto; }
</style>
